<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        body{background:black;}
        *{margin:0;padding:0;}
        #text_box{
            width:600px;
            height:170px;
            background:white;
            margin:120px auto 10px;
            border-radius:10px;
            position:relative;
        }
        #text_box .title{
            font-size:12px;
            color:#666;
            line-height:40px;
            text-indent:20px;    /*首行缩进*/
        }
        #text_box .text{
            width:565px;
            height:70px;
            margin:0 auto;
            font-size:20px;
            line-height:30px;
            padding:0 10px;
            overflow:auto;
            border:2px solid red;
        }
        #text_box .pic{
            width:22px;
            height:22px;
            background:url("img/bq8.gif");
            margin:20px 0 0 20px;
            position:relative;
        }
        #text_box .pic ul{
            width:420px;
            height:400px;
            background:blue;
            border:1px solid red;
            list-style:none;
            position:absolute;
            left:22px;
            padding:5px;
            display:none;
        }
        #text_box .pic ul li{
            float:left;
        }

        #text_box .but{
            width:80px;
            height:30px;
            background:yellow;
            float:left;
            line-height:30px;
            font-size:12px;
            text-align:center;
            border-radius:5px;
            position:absolute;
            right:10px;
            bottom:10px;
            cursor:pointer;
        }
        #con{
            width:600px;
            margin:10px auto 10px;
        }
        #con .con_title{
            width:600px;
            background:#fff;
            margin-top:10px;
            float:left;
        }
        #con .con_title .con_pic{
            padding:12px 12px;
            width:22px;
            height:22px;
            float:left;
        }
        #con .con_title .con_text{
            line-height:70px;
            color:blue;

        }
        #con .con_title .content{
            background:white;
            line-height:40px;
            border-top:1px solid #ddd;
            padding:2px 0 2px 10px;
        }
    </style>
</head>
<body>
<div id="text_box">
    <!--  js部分 -->
    <div class="title">你有神马要说的吗？</div>
    <div class="text" contenteditable="true"></div>
    <div class="pic">
        <ul>
            <li><img src="img/bq8.gif" title="[爆笑]" /></li>
            <li><img src="img/bq9.gif" title="哈欠" /></li>
        </ul>
    </div>
    <div class="but">发表</div>
</div>
<div id="con">
    <!-- <div class="con_title">
             <div class="con_pic"><img src="img/bq8.gif" /></div>
             <div class="con_text">狗屎</div>
            <div style="clear:both"></div>
             <div class="content">你想被干嘛</div>
         </div> -->

</div>
</body>
<script tpye="text/javascript" src="jquery-2.1.4.min.js"></script>
<script>
    //alert($)
    $("#text_box .pic").click(function(e){
        //alert("你妹，赶快点击我")
        $("#text_box .pic ul").slideDown(500);
        //阻止冒泡事件
        e.stopPropagation()
    });
    $(document).click(function(){
        //alert("你妹，赶快点击我")
        $("#text_box .pic ul").slideUp(500);

    });
    //点击图片表情
    $("#text_box .pic ul li").click(function(){
        var img=$(this).find("img").clone();
        //$("#text_box .text").html(img)
        $("#text_box .text").append(img)
    });
    //点击发送
    $("#text_box .but").click(function(){
        //alert("你妹，赶快点击我")

        var _text=$("#text_box .text").html();     //获取内容
        if(_text==""){
            alert("亲爱的，你还没输入内容");
            $("#text_box .text").focus();

        }else{
            $("#con").append("<div class='con_title'><div class='con_pic'><img src='img/bq8.gif' /></div> <div class='con_text'>狗屎</div><div style='clear:both'></div> <div class='content'>"+_text+"</div></div>")
            //发表后清空内容框（文本内容设置为空）
            $("#text_box .text").html("");
        };

        //alert(_text);
        //添加内容

    });



</script>
</html>
